import './index.css'
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'

/**
 * Geometry
 */
const geometry = new THREE.PlaneGeometry(1, 1)


/**
 * 棋盘格子
const vertex = `
    varying vec2 vUv;
    void main(){
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`
const fragment = `
    varying vec2 vUv;
    void main(){ 
      vec3 mask1 = vec3(step(0.5,fract(vUv.x * 3.0)));
      vec3 mask2 = vec3(step(0.5,fract(vUv.y * 3.0)));
      vec3 mask = abs(mask1 - mask2);
      gl_FragColor = vec4(mask,1.0);
    }
`
 */


/**
 * 彩色格子
const vertex = `
    varying vec2 vUv;
    void main(){
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`
const fragment = `
    varying vec2 vUv;
    void main(){ 
      vec3 color1 = vec3(1.0,1.0,0.0);
      vec3 color2 = vec3(0.0,1.0,1.0);
      vec3 mask1 = vec3(step(0.5,fract(vUv.x * 3.0)));
      vec3 mask2 = vec3(step(0.5,fract(vUv.y * 3.0)));
      vec3 mask = abs(mask1 - mask2);
      vec3 color = mix(color1,color2,mask);
      gl_FragColor = vec4(color,1.0);
    }
`
 */




const vertex = `
    varying vec2 vUv;
    void main(){
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
`
const fragment = `
    float aastep(float threshold, float value) {
        #ifdef GL_OES_standard_derivatives
            float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
            return smoothstep(threshold-afwidth, threshold+afwidth, value);
        #else
            return step(threshold, value);
        #endif  
    }


    varying vec2 vUv;
    void main(){ 
      float strength = aastep(0.01,abs(distance(vUv,vec2(0.5)) - 0.2));
      vec3 color =  vec3(strength);
      gl_FragColor = vec4(color,1.0);
    }
`


/**
 * Matetrial
 */
const material = new THREE.ShaderMaterial({
    uniforms:{
        uTime:{
            value:0
        }
    },
    // 解决抗锯齿
    extensions: {
        derivatives: true,
    },
    vertexShader:vertex,
    fragmentShader:fragment
})

/**
 * Mesh
 */
const mesh = new THREE.Mesh(geometry, material)

/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.z = 3

/**
 * Scene
 */
const scene = new THREE.Scene()
scene.add(mesh)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)
renderer.setClearColor('#f19191')



/**
 * OrbitControls
 */
const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true 



/**
 * Update
 */
let clock = new THREE.Clock();
let elpasedTime  = 0;
const tick = () => {
    elpasedTime = clock.getElapsedTime();
    // material.uniforms.uTime.value = elpasedTime;
    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()